<template>
	<div id="">
	<el-upload
	  v-model:file-list="data.cimgs"
	  list-type="picture-card"
	  :on-preview="handlePictureCardPreview"
	  :on-remove="handleRemove"
		:http-request="add"
	>
	  <el-icon><Plus /></el-icon>
	</el-upload>
	
	<el-dialog v-model="dialogVisible">
	  <img w-full :src="dialogImageUrl" alt="Preview Image" />
	</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { ref,reactive,onMounted } from 'vue'
	import { Plus } from '@element-plus/icons-vue'
	import {$get,$postf} from "../../ajax/index.js"
	import type { UploadProps, UploadUserFile } from 'element-plus'
	const fileList = ref<UploadUserFile[]>([])
	const data=reactive({
		cimgs:[]
	})
	// 挂载
	onMounted(()=>{
		let cimg=[];
		$get("/api/adm/cimg/findAll")
		.then((resp)=>{
			console.log(resp.data)
			data.cimgs=resp.data.data;
			for(let i=0;i<data.cimgs.length;i++){
						  console.log(data.cimgs)
				  data.cimgs[i].url = '/api/public/findAllimg/'+data.cimgs[i].id
						  cimg.push(data.cimgs[i]);
						  console.log(cimg)
			}
		})
		fileList.value = cimg;
	})
	
	function add(param:any){
		  let fd = new FormData();
		  var filex = param.file;  
		  fd.append("mypic",filex);
		  $postf("/api/adm/cimg/add",fd)
		  .then((resp)=>{
			  console.log(resp.data)
		  })
	}
	
	const dialogImageUrl = ref('')
	const dialogVisible = ref(false)
	
	const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
	  console.log(uploadFile, uploadFiles)
	  console.log(uploadFile.id)
	  console.log("删除")
	  let x=[];
	  $get("/api/adm/cimg/del/"+uploadFile.id)
	  .then((resp)=>{
		  console.log(resp.data)
		  for(let i=0;i<data.cimgs.length;i++){
		  	  data.cimgs[i].url='/api/public/findAllimg/'+data.cimgs[i].id
				  x.push(data.cimgs[i]);
			console.log(x);
		  }
		  
	  })
	}
	
	
	const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
		
	  dialogImageUrl.value = uploadFile.url!
	  dialogVisible.value = true
	}
</script>

<style>
</style>
